<template>
	<div class="app">
		<order-tab v-model="tabIndex" @switchTab="switchTabHead" :tab-data="tabData" />
		<SeachNav @search="searchKey" @openPopup="openPopup"></SeachNav>
		<screen ref="screen" isCityShow :filterMaskData.sync="filterMaskData" @filterBtnCall="filterQuery" @filterQuery="filterQuery"></screen>
		<!-- <template v-if="!$util.isEmpty(tabData) && !isOrderEnter">
		<div class="tab">
			<div
				class="item"
				:class="{on:activeIndex === index && (showSelect)}"
				v-for="(item,index) in tabList"
				:key="item"
				@click="switchTab(index)">
				<span class="txt">{{item}}</span>
				<view class="iconfont iconxiala"></view>
			</div>
		</div>
		<uni-pop
			type="top"
			:custom="true"
			:show="showSelect"
			ref="pop"
			:zIndex="900"
			@change="closePop">
			<div class="dropdown_list" v-show="showSelect">
				<div
					class="item"
					v-for="(item,index) in tabData"
					:key="item.value"
					@click="switchRecord(item.value)">
					<span
						class="left"
						:class="{on: tabIndex == item.value}">
						{{item.text}}
						</span>
					<view v-if="tabIndex == item.value" class="iconfont iconxuanze"></view>
				</div>
			</div>
		</uni-pop>
		</template>-->
		<!-- <template v-else>
      <div class="title_text">全部订单({{ list.total }})</div>
		</template>-->
		<div class="list">
			<template v-if="!$util.isEmpty(list.data)">
				<div class="list_item"
					@click="setReadCurrent(item)"
					v-for="(item, index) in list.data"
					:key="index">
					<div class="list_item_info">
						<div class="list_item_title">
							<div>
								<h3>{{ $util.isEmpty(item.name)?'':item.name }}</h3>
							</div>
							<div class="auxiliary_color_2" v-if="isReceiving">
								<h3 v-if="item.rush_pay_type == 1">{{ item.rush_points }}积分</h3>
								<h3 v-else>￥{{ item.rush_price }}</h3>
							</div>
						</div>
						<div class="list_item_icon">
							<img v-if="item.is_read == 1" src="../../static/images/publicicon/order_read.png" alt="已读" />
							<img v-if="item.is_read == 0" src="../../static/images/publicicon/order_unread.png" alt="已读" />
							<!-- <template v-if="(!$util.isEmpty(item.prebook_sys_id) && item.prebook_sys_id > 0)"> -->
							<!-- <img
						v-if="item.recruit_status == 1"
						:src="`${constant.imgUrl}common/order_received_icon.png`"
						alt="已接单" >
					<img
						v-else-if="item.recruit_status == 0"
						:src="`${constant.imgUrl}common/missed_order_icon.png`"
						alt="未接单" >
					<img
						v-else
						:src="`${constant.imgUrl}common/order_have_expired.png`"
							alt="已过期" >-->
							<!-- </template> -->
						</div>
					</div>
					<div class="list_item_info yellowBcak">
						<div class="info_list">
							<span class="list_item_label">联系电话：</span>
							<span @click="callUp(item.mobile_phone)" class="list_item_value">{{ item.mobile_phone || '待确认' }}</span>
							<span v-if="isReceiving" class="auxiliary_color_2">(接单后可联系)</span>
						</div>
						<div v-if="!isReceiving">阶段：{{ sysBookingStatus[item.status] || '待定' }}</div>
					</div>

					<div class="list_item_info">
						<div class="info_list">
							<span class="list_item_label">地&#12288;&#12288;址：</span>
							<span class="list_item_value">{{getDistrict([item.province_id,item.city_id,item.district_id]) || '待确认'}} | {{ item.xiaoqu || '待确认' }}</span>
						</div>
					</div>
					<div class="list_item_info">
						<div class="info_list">
							<span class="list_item_label">户&#12288;&#12288;型：</span>
							<span class="list_item_value" v-if="item.house_type == 1">
								{{ item.house_shi }}房&nbsp; |&nbsp;{{ item.house_ting }}厅&nbsp; |&nbsp;{{ item.house_yang }}阳台&nbsp; |&nbsp;{{ item.house_wei }}卫&nbsp; |&nbsp;{{ item.house_chu }}厨 |
								{{
								$util.isEmpty(item.square)?'待确认': item.square + '㎡'
								}}
							</span>
							<span class="list_item_value" v-else>
								{{ $util.isEmpty(item.house_remark)?'待确认':item.house_remark }} |
								{{
								$util.isEmpty(item.square)?'待确认': item.square + '㎡'
								}}
							</span>
						</div>
					</div>
					<div class="list_item_info">
						<div class="info_list">
							<span class="list_item_label">预&#12288;&#12288;算：</span>
							<span class="list_item_value" :class="{'auxiliary_color_2' : sysBudgetStatus[item.budget_type]}">{{ sysBudgetStatus[item.budget_type] || '待确认' }}</span>
						</div>
					</div>
					<div class="list_item_info">
						<div class="info_list">
							<span class="list_item_label">装修类型：</span>
							<span class="list_item_value">{{ sysRenovationStatus[item.renovation_type] || '待确认' }}</span>
						</div>
					</div>
					<div class="list_item_info">
						<div class="info_list">
							<span class="list_item_label">渠道来源：</span>
							<span class="list_item_value">{{ item.prebook_source || '待确认' }}</span>
						</div>
					</div>
					<div class="list_item_info">
						<div class="info_list">
							<span class="list_item_label">业主需求：</span>
							<span class="noHidden">{{ item.remark || '待确认' }}</span>
						</div>
					</div>
					<div v-if="!isReceiving && $util.shieldReview()" class="list_item_btn_box">
						<navigator
							v-if="(!$util.isEmpty(item.prebook_sys_id) && item.prebook_sys_id === 0) || (item.prebook_sys_id > 0 && (item.recruit_status === 1))"
							:url="`/pages/order/centerClientDatail${commonJS.queryData({
                          mobile_phone: item.mobile_phone,
                          create_user_id: item.create_user_id,
						  owner_user_id: query.owner_user_id || query.user_id,
                          prebook_id: item.prebook_id})}`"
							class="edit_btn"
						>编辑</navigator>
						<div v-if="userInfo.vip_level == 0 && $util.shieldReview()" class="main_btn_com" @click="promptVipFn">联系客户</div>
						<span v-else @click="callUp(item.mobile_phone)" class="main_btn_com">联系客户</span>
					</div>
					<div class="list_item_btn" v-else-if="$util.shieldReview()">
						<div class="edit_btn subscribe_order" @click="goPay(item)">接单</div>
					</div>
				</div>
			</template>
			<div v-if="$util.isEmpty(list.data)
            &&!list.loading" class="empty_box">
				<div class="empty_img">
					<app-wrapper-empty :is-title="tabIndex != 3" type="noData" :is-loading="list.loading" title="你目前还没有预约客户，快看看下面的攻略获客吧" :is-empty="$util.isEmpty(list.data)">
						<div slot="empty_title" class="empty_title_box">
							<template>
								<div class="empty_title_status">您还未创建客户资料</div>
								<div class="empty_title_dec">做好客户资料的管理，有助于了解和分析客户，为您带来更大的效益</div>
								<div @click="goTo" class="empty_title_btn">去创建</div>
							</template>
						</div>
					</app-wrapper-empty>
				</div>
				<div class="quick_box">
					<guide-list type @jumpPage="jumpPage" />
				</div>
			</div>
			<template v-else>
				<app-wrapper-empty type="noData" :finished="list.finished" :is-loading="list.loading" :is-empty="$util.isEmpty(list.data)" />
			</template>
		</div>
		<!-- <footer
      v-if="!isOrderEnter"
      @click="goTo"
      class="app-footer">
      <img
        class="add"
        :src="`${constant.imgUrl}center/icon_addcase.png`"
        alt >
      <span>创建客户</span>
		</footer>-->
		<!-- div class="centerclient">
			<div class="qrcode" v-show="qrcodeShow">
				<div class="qrcode_box">
					<div class="qrcode_close" @click="qrcodeHide">
						<img class="qrcode_close_img" :src="constant.imgUrl + 'center/icon_close.png'" alt />
					</div>
					<div class="qrcode_img">
						<img class="erweima" :src="storeQrCode" alt />
					</div>
					<div class="qrcode_remind">有新预约单可以及时获得提醒</div>
					<div class="qrcode_remind">保存二维码到相册后进行扫码识别</div>
					<div class="qrcode_attention" @click="saveNopublicImg">保存</div>
				</div>
			</div>
		</!-->
		<!-- <app-store-qrCode ref="appStoreQrCode" :qrCode="storeQrCode">
		<template slot="prompt">
          	<div class="qrcode_remind">有新预约单可以及时获得提醒</div>
          	<div class="qrcode_remind">保存二维码到相册后进行扫码识别</div>
		</template>
		</app-store-qrCode>-->
		<footer class="main-footer">
			<defooter ref="defooters" :activeIndex="3" />
		</footer>
		<open-VIP :show.sync="showVipPop" />
		<add-com-icon v-if="$util.shieldReview()" @add="goTo" />
	</div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import apiCenter from '@/api/center'
import { list, allOptions, area } from '@/mixins'
import AppWrapperEmpty from '@/components/App_wrapper_empty'
import GuideList from '@/pages/components/guideList'
import openVIP from '@/pages/components/dialog/openVIP'
import SeachNav from '@/pages/components/SeachNav.vue'
import screen from '@/components/App_screen.vue'
import uniPop from '@/components/uni-popup/uni-popup'
import { getUser } from '@/utils/auth'
import AddComIcon from '@/components/module/AddComIcon.vue'
import OrderTab from './components/OrderTab'
import Defooter from '@/pages/components/deFooter'
export default {
	name: 'SubscribeOrder', // 派单客户
	mixins: [list, allOptions, area],
	components: {
		AppWrapperEmpty,
		GuideList,
		openVIP,
		SeachNav,
		screen,
		uniPop,
		AddComIcon,
		OrderTab,
		Defooter
	},
	data() {
		return {
			storeQrCode: this.$constant.oemObj.publicQrCode,
			isOrderEnter: false, // 是否是已接单的入口
			showVipPop: false,
			searchValue: '',
			tabIndex: 0,
			from: {
				keyword: '',
				create_start: '',
				create_end: '',
				prebook_source_type: '',
				status: '',
				province_id: '',
				city_id: '',
				district_id: '',
				renovation_type: '',
				budget_type: ''
			},
			qrcodeShow: false,
			filterMaskData: [
				{
					title: '当前阶段',
					type: 2,
					key: 'status',
					list: []
				},
				/* {
					title: '装修类型（多选）',
					key: 'renovation_type',
					type: 2,
					list: []
				},*/
				{
					title: '装修预算',
					key: 'budget_type',
					list: []
				}
			],
			query: null,
			constant: this.$constant,
			showSelect: false,
			oneLoad: false,
			tabData: []
		}
	},

	onPullDownRefresh() {
		this.resetList()
		this.updateList().then(res => {
			uni.stopPullDownRefresh()
		})
	},
	onReachBottom() {
		if (this.list.data.length < this.list.total) {
			this.updateList().then(res => {
				uni.stopPullDownRefresh()
			})
		} else {
			uni.stopPullDownRefresh()
		}
	},
	onLoad(val) {
		getUser().then(res => {
			if (this.constant.oemSource == 2 || this.constant.oemSource == 4) {
				if (this.constant.oemSource == 4 && res.role_id == 1) {
					this.tabData = [{ name: '店铺预约单', value: 1, total: 0 }, { name: '自建客户', value: 3, total: 0 }, { name: '员工预约单', value: 4, total: 0 }]
				} else {
					if (this.constant.oemSource == 2 && res.role_id == 1) {
						this.tabData = [{ name: '店铺预约单', value: 1, total: 0 }, { name: '已接单', value: 2, total: 0 }, { name: '自建客户', value: 3, total: 0 }]
					} else {
						this.tabData = [{ name: '店铺预约单', value: 1, total: 0 }, { name: '自建客户', value: 3, total: 0 }]
					}
				}
			} else {
				this.tabData = [{ name: '店铺预约单', value: 1, total: 0 }, { name: '可接单', value: 'receiving', total: 0 }, { name: '已接单', value: 2, total: 0 }, { name: '自建客户', value: 3, total: 0 }]
			}
		})

		this.query = {
			...val
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getUser' }),
		isReceiving() {
			return this.tabIndex == 1 && this.tabData[this.tabIndex].value == 'receiving'
		},

		isVip() {
			return this.userInfo.vip_level > 0
		}
	},
	onShow() {
		if (this.oneLoad) {
			this.resetList()
			this.getOrderStatistics()
			this.updateList()
		}
	},
	mounted() {
		if (!this.$util.isEmpty(this.query.tabIndex)) {
			this.tabIndex = this.query.tabIndex
		}
		this.from.prebook_source_type = this.tabData[this.tabIndex].value
		// // 是否是已接单的入口
		if (!this.$util.isEmpty(this.query.isOrderEnter)) {
			this.isOrderEnter = true
		}
		this.getOrderStatistics()
		this.inspects()
		this.oneLoad = true
	},
	methods: {
		// 个人预约单
		isUserId() {
			let obj = {}
			if (!this.$util.isEmpty(this.query.user_id)) {
				return {
					owner_user_id: this.query.user_id
				}
			}
			return {}
		},
		setReadCurrent(val) {
			if (+val.is_read === 1) return
			this.setRead(val.prebook_id, () => {
				// eslint-disable-next-line no-param-reassign
				val.is_read = 1
			})
		},
		setRead(prebook_id, cb) {
			return apiCenter
				.setReadStatus({
					is_read: 1,
					prebook_id
				})
				.then(res => {
					if (res.status === 'success') {
						cb()
					} else {
						uni.showToast({
							title: res.errors.message,
							icon: 'none'
						})
					}
				})
		},
		goPay(item) {
			if (!this.isVip) {
				this.showVipPop = true
				return
			}
			const { rush_pay_type, prebook_id, owner_user_id } = item
			const params = {
				prebook_id,
				pay_type: rush_pay_type == 1 ? 'points' : 'price'
			}
			apiCenter.grabOrderPayInfo({ prebook_id }).then(res => {
				if (res.status === 'success') {
					const { rush_price, rush_points, seller_money, pay_points } = res.data
					if (rush_pay_type == 1) {
						if (this.$util.isEmpty(pay_points) || parseFloat(pay_points) < parseFloat(rush_points)) {
							this.canPay = false
						} else {
							this.canPay = true
						}
					} else if (this.$util.isEmpty(seller_money) || parseFloat(seller_money) < parseFloat(rush_price)) {
						this.canPay = false
					} else {
						this.canPay = true
					}

					if (!this.canPay) {
						if (rush_pay_type == 1) {
							uni.showModal({
								title: '',
								content: '您的积分不足，请充值积分',
								showCancel: false,
								confirmText: '去充值',
								success: () => {
									uni.navigateTo({
										url: '/pages/integral/integralPay'
									})
								}
							})
							// Dialog.alert({
							// 	message: '您的积分不足，请充值积分',
							// 	closeOnClickOverlay: true,
							// 	confirmButtonText: '去充值'
							// }).then(() => {
							// 	uni.navigateTo({
							// 		url: '/pages/integral/myMission'
							// 	})
							// })
						} else {
							uni.showModal({
								title: '',
								content: '您的余额不足，请充值',
								showCancel: false,
								confirmText: '去充值',
								success: () => {
									this.recharge()
								}
							})
						}
					} else if (this.canPay) {
						apiCenter.payGrabOrder(params).then(res => {
							if (res.status === 'success') {
								const data = res.data
								const pastParams = {
									name: data.name,
									mobile_phone: data.mobile_phone,
									xiaoqu: data.xiaoqu,
									house_type: data.house_type == 1 ? `${data.house_shi}房${data.house_ting}厅${data.house_yang}阳${data.house_wei}卫${this.$util.isEmpty(data.house_chu) ? 0 : data.house_chu}厨` : data.house_remark,
									square: `${data.square}㎡`,
									create_user_id: data.create_user_id,
									district: this.getDistrict([item.province_id, item.city_id, item.district_id]),
									prebook_id: data.prebook_id,
									owner_user_id: this.query.owner_user_id || this.query.user_id
								}
								uni.navigateTo({
									url: `/pages/order/grabOrderSucc${this.commonJS.queryData(pastParams)}`
								})
							}
						})
					}
				} else {
					uni.showToast({
						title: res.errors.message,
						icon: 'none'
					})
				}
			})
		},
		recharge() {
			uni.navigateTo({
				url: '/pages/balance/cashRechange'
			})
		},
		openPopup() {
			this.$refs.screen.openPopup()
		},
		callUp(val) {
			uni.makePhoneCall({
				phoneNumber: val // 仅为示例
			})
		},
		closePop(e) {
			if (!e.show) {
				this.showSelect = false
			}
		},
		// switchRecord(val) {
		// 	this.tabIndex = val
		// 	this.from.prebook_source_type = val
		// 	this.resetList()
		// 	this.init()
		// },
		getOptions() {
			// sysBudgetStatus 预算   sysRenovationStatus 装修类型  sysBookingStatus 派单状态
			this.filterMaskData[0].list = this.formatOptions(this.sysBookingStatus)
			// this.filterMaskData[1].list = this.formatOptions(this.sysRenovationStatus)
			// this.filterMaskData[2].list = this.formatOptions(this.sysBudgetStatus)
			this.filterMaskData[1].list = this.formatOptions(this.sysBudgetStatus)
			this.switchFilter()
		},
		jumpPage(val) {
			this.$router.push({
				name: val.path,
				query: {
					owner_user_id: this.query.owner_user_id || this.query.user_id
				}
			})
		},
		async inspects() {
			// eslint-disable-next-line prefer-destructuring
			if (this.$util.isEmpty(this.userInfo)) {
				await getUser()
			}
			if (this.$util.isEmpty(this.allOptions)) {
				await this.getAllOptions()
			}
			this.getOptions()
			this.updateList()
			const subscribe = this.userInfo.connect_wechat.subscribe
			if (subscribe === 'null') {
				// this.$refs.appStoreQrCode.showMask()
				this.qrcodeShow = true
			} else if (subscribe === 1) {
				// this.$refs.appStoreQrCode.hideMask()
				this.qrcodeShow = false
			} else {
				// this.$refs.appStoreQrCode.showMask()
				this.qrcodeShow = true
			}
		},
		qrcodeHide() {
			// this.$refs.appStoreQrCode.hideMask()
			this.qrcodeShow = false
			uni.setStorageSync('publicqcode', 'existence')
		},
		getOrderStatistics() {
			apiCenter
				.getSubscribeOrderStatistics({
					type: 'prebook_source_type',
					...this.isUserId()
				})
				.then(res => {
					if (res.status === 'success') {
						const { store_activity_channel, can_recruit_channel, store_create_channel, sys_recruit_channel, staff_user_list_num } = res.data
						this.tabData = this.tabData.map(i => {
							if (i.value === 'receiving') {
								return {
									...i,
									//   text: `${i}(${channel_all})`,
									total: `${can_recruit_channel}个`
								}
							}
							if (i.value == '1') {
								return {
									...i,
									//   text: `${i.text}(${store_activity_channel})`,
									total: `已有${store_activity_channel}个`
								}
							}
							if (i.value == '2') {
								return {
									...i,
									//   text: `${i.text}(${sys_recruit_channel})`,
									total: `${sys_recruit_channel}个`
								}
							}
							if (i.value == '3') {
								return {
									...i,
									total: `${store_create_channel}个`
								}
							}
							if (i.value == '4') {
								return {
									...i,
									total: `${staff_user_list_num}个`
								}
							}
						})
					} else {
						uni.showToast({
							title: res.errors.message,
							icon: 'none'
						})
					}
				})
		},

		switchTab(index) {
			this.showSelect = false
			// this.activeIndex = index
			//  if(this.activeIndex != 1 && this.filterMaskData[0].key ==)
		},
		switchFilter() {
			if (this.tabIndex == 1 && this.filterMaskData[0].key == 'is_read') {
				this.filterMaskData.shift()
			} else if (this.tabIndex != 1 && this.filterMaskData[0].key != 'is_read') {
				this.filterMaskData.unshift({
					title: '是否已读',
					// type: 2,
					key: 'is_read',
					list: [
						{
							id: '1',
							name: '已读',
							status: false
						},
						{
							id: '0',
							name: '未读',
							status: false
						}
					]
				})
			}
		},
		switchTabHead(val) {
			this.resetList()
			this.from.prebook_source_type = val.value
			this.switchFilter()
			this.updateList()
		},
		receivingInit() {
			return apiCenter
				.grabOrderList({
					...this.from,
					rush_type: 2,
					page: this.list.page,
					limit: this.list.limit,
					...this.isUserId()
				})
				.then(res => {
					this.completes({ data: res.data.lists, status: 'success' })
				})
		},
		updateList() {
			if (this.isReceiving) {
				return this.receivingInit()
			}
			return this.init()
		},
		filterQuery(item) {
			this.resetList()
			this.from = {
				...this.from,
				...item.form
			}
			this.isIndeterminate()
			this.updateList()
		},
		searchKey(val) {
			this.from.keyword = val
			this.resetList()
			this.updateList()
		},
		// 待定时添加0条件
		isIndeterminate() {
			const isIndeterminate = this.from.status.split(',').filter(i => +i === 1)
			if (!this.$util.isEmpty(isIndeterminate)) {
				this.from = {
					...this.from,
					status: `${this.from.status},0`
				}
			}
		},
		init() {
			let host = this.from.prebook_source_type == 4 ? apiCenter.getStaffUserList : apiCenter.getSubscribeOrderList
			return host({
				...this.from,
				page: this.list.page,
				limit: this.list.limit,
				...this.isUserId()
			})
				.then(res => {
					if (this.from.prebook_source_type == 4) {
						if (!this.$util.isEmpty(res.data.list)) {
							res.data.list.map(e => {
								e.name = e.customer_name
								e.xiaoqu = e.community
								e.house_type = e.room_type
								e.square = e.area
								return e
							})
						}
						this.completes(res)
					} else {
						this.completes(res)
					}
				})
		},
		goTo() {
			uni.navigateTo({
				url: '/pages/order/subscribeOrderEdit'
			})
		},
		promptVipFn() {
			this.showVipPop = true
		},
		// 保存公众号二维码
		saveNopublicImg() {
			uni.getImageInfo({
				src: this.storeQrCode,
				success: imgInfo => {
					uni.saveImageToPhotosAlbum({
						filePath: imgInfo.path,
						success: () => {
							uni.showToast({
								title: '已保存到相册',
								icon: 'success'
							})
						},
						fail: e => {
							console.log(e)
							uni.showToast({
								title: '保存失败',
								icon: 'none'
							})
						}
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.empty_title_box {
		width: 527px;
		margin: 0 auto;
		text-align: center;
		& .empty_title_status {
			color: #333333;
			font-size: 26px;
			font-weight: 400;
		}
		& .empty_title_dec {
			color: #999999;
			font-size: 24px;
			line-height: 36px;
			margin: 20px 0 50px;
		}
		& .empty_title_btn {
			margin: 0 auto;
			width: 200px;
			height: 80px;
			background: rgba(254, 208, 55, 1);
			border-radius: 45px;
			color: #391b06;
			font-size: 24px;
			line-height: 80px;
			display: block；;
		}
	}
	.list_item_btn {
		display: flex;
		// justify-content: flex-end;
		justify-content: space-between;
		align-items: center;
		.left_wrap {
			display: flex;
			.price {
				font-size: 38px;
				color: #ff6900;
				display: flex;
				align-items: flex-end;
				.symbol {
					font-size: 24px;
				}
			}
		}
		.edit_btn {
			color: rgba(255, 255, 255, 1);
			font-size: 26px;
			padding: 15px 30px;
			border-radius: 50px;
			font-weight: 400;
			border: 0.5px solid #ddd; /*no*/
			margin: 0 10px;
			background-color: rgba(204, 204, 204, 1);
			text-align: center;
			flex: 1;
			&.subscribe_order {
				color: #3a1b04;
				border: 0.5px solid $mainColor; /*no*/
				background-color: $mainColor;
			}
		}
	}
	.auxiliary_color_2 {
		color: #ff6900;
	}
	.app {
		min-height: 100%;
		background-color: #f5f5f5;
		line-height: 1.4;
	}
	.title_text {
		font-size: 26px;
		color: $fontColor2;
		margin-top: 30px;
		margin-left: 30px;
	}
	.empty_box {
		padding-bottom: 100px;
		width: calc(100% - 60px);
		margin: 20px auto;
		border-radius: 20px;
		& .quick_box {
			margin-top: 20px;
			background-color: #fff;
			border-radius: 20px;
			position: relative;
		}
		& .empty_img {
			background-color: #fff;
			padding-bottom: 50px;
			border-radius: 20px;
		}
	}
	.app-ontent {
		background-color: #f5f5f5;
	}
	.list_item_info {
		display: inline-block;
		width: 100%;
		margin-bottom: 10px;
	}
	.list {
		padding-bottom: 10px;
		.list_item {
			border-radius: 30px;
			// font-weight: 600;
			margin: 20px 30px 20px;
			padding: 1px 30px 20px;
			background-color: #fff;
			color: $fontColor2;
			position: relative;
			.list_item_title {
				margin: 40px 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #333;
				min-height: 46px;
				.list-head {
					line-height: 36px;
					color: #999999;
					max-width: 480px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					& > span {
						font-size: 24px;
						color: #333333;
					}
				}
				& h3 {
					font-size: 34px;
					font-weight: 600;
					flex: 1;
				}
			}
			.info_list {
				margin-bottom: 10px;
				display: flex;
				.list_item_label {
					color: $fontColor3;
				}
				& .list_item_value {
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					-o-text-overflow: ellipsis;
					white-space: nowrap;
					& > span {
						color: #ff6900;
					}
				}
				& .noHidden {
					flex: 1;
					& > span {
						color: #ff6900;
					}
				}
			}
			.list_item_btn_box {
				display: flex;
				justify-content: flex-end;
				.edit_btn {
					color: #333;
					font-size:24px;
					padding: 15px 30px;
					border-radius: 50px;
					font-weight: 400;
					border: 0.5px solid #ddd; /*no*/
					margin: 0 10px;
					&.subscribe_order {
						text-align: center;
						color: #3a1b04;
						border: 0.5px solid $mainColor; /*no*/
						background-color: $mainColor;
					}
				}
				.main_btn_com {
					margin-left: 10px;
				}
			}
			.list_item_icon {
				position: absolute;
				top: 16px;
				right: 30px;
				img {
					width: 104px;
					height: 104px;
				}
			}

			.yellowBcak {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: $auxiliaryColor2;
				background-color: #fff7f1;
				padding: 0 8px;
				height: 50px;
				margin: 0 -8px 10px;
				.list_item_label {
					color: $auxiliaryColor2;
				}
				.info_list {
					margin-bottom: 0;
				}
			}
		}
	}

	.tab {
		width: 100%;
		height: 100px;
		position: relative;
		z-index: 950;
		display: flex;
		background-color: #fff;
		border-top: 1px solid #ccc;
		.item {
			flex: 1;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			&.on {
				.txt,
				.iconxiala {
					color: #ff6900;
				}
			}
			.txt {
				font-size: 26px;
				color: rgba(102, 102, 102, 1);
				padding-right: 10px;
			}
		}
	}
	.dropdown_list {
		background-color: #fff;
		margin-top: 192px;
		width: 750px;
		.item {
			padding: 0 30px;
			height: 100px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 1px solid #ddd;
			.left {
				&.on {
					color: #ff6900;
				}
			}
			.iconxuanze {
				color: #ff6900;
				font-size: 40px;
			}
		}
	}
	.iconxiala {
		color: #666;
		font-size: 24px;
	}
	.centerclient {
		background-color: #f5f5f5;
		.qrcode {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 9999;
			& .qrcode_box {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				padding-top: 100px;
				width: 490px;
				height: 650px;
				// height: 595px;
				background-color: #fff;
				border-radius: 15px;
				box-sizing: border-box;
				& .qrcode_close {
					position: absolute;
					right: 24px;
					top: 24px;
					width: 60px;
					height: 60px;
					@include direction(center, center);
					// background: url($imgUrl+'center/icon_close.png') center center / 100% 100% no-repeat;
					.qrcode_close_img {
						// margin: 5px;
						width: 30px;
						height: 30px;
					}
				}
				& .qrcode_img {
					margin: auto;
					width: 300px;
					height: 300px;
				}
				& .qrcode_img .erweima {
					width: 100%;
					height: 100%;
				}
				& .qrcode_attention {
					@include direction(center, center);
					width: 60%;
					margin: 30px auto 0;
					font-size: 30px;
					color: $auxiliaryColor1;
					text-align: center;
					padding: 10px 0;
					background-color: $mainColor;
					border-radius: 50px;
				}
				& .qrcode_remind {
					margin-top: 20px;
					font-size: 30px;
					color: #999;
					text-align: center;
				}
			}
		}
	}
</style>
